<template>
  <div>
    <ButtonGroup>
      <Button type='primary' @click='modal=true'>添加</Button>
      <Button type='error' @click='removeMore'>删除多个</Button>
    </ButtonGroup>
    <Input v-model='data.title'>
      <Button slot="append" icon="ios-search" @click="search">搜索</Button>
    </Input>
   
    <Modal 
      v-model='modal'
      title='数据信息'
      @on-ok='ok'
      @on-cancel='cancel'>
    <Form ref='formValidate' :model='formValidate' :rules='ruleValidate'>
      <FormItem label='Title' prop='title'>
        <Input v-model='formValidate.title' placeholder='Enter your title'> </Input>
      </FormItem>
       <FormItem label='分类Id' prop='cateId'>
        <Input v-model='formValidate.cateId' placeholder='Enter your cateId'> </Input>
      </FormItem>
        <FormItem>
           <Button type='primary' @click="handleSubmit('formValidate')">submit</Button>
            <Button type='ghost' @click="handleReset('formValidate')" style="margin-left:8px">添加</Button>
      </FormItem>
    </Form>
    </Modal>

     <Modal v-model="modal2" width="500">
        <p slot="header" style="color:black;text-align:center">
           <Icon type="ios-world-outline"></Icon>
            <span>Delete confirmation</span>
        </p>
        <div style="text-align:left">
            <p>新闻管理系统完整的后台带数据库-CSDN下载
新闻管理系统完整的后台带数据库,角色权限很完善,让开发人员直接继承的后台项目..</p>
           
        </div>
        <div slot="footer">
            <Button type="" size="large"  :loading="modal_loading" @click="compoment">评论</Button>
        </div>
    </Modal>
  
<!-- 增加点击事件 -->
      <Tree :data="treeData" @on-select-change="onSelectChange"></Tree>
      <Table border :columns='columns' :data='list' @on-selection-change='checkMore' ></Table>
      <Page :total='data.total'
      @on-change='onChangePage'
      @on-page-size-change='onPageSizeChange'
      size='small' show-elevator show-sizer></Page>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        formValidate:{
          title:'',
          cateId:0
        },
        ruleValidate:{
          title:[
            {required:true,message:'The title can not be empty'}
          ]
        },
        treeData:[],
        modal:false,
        modal2:false,
        
        columns: [
                    {
                      type:'selection',
                      width:60,
                      align:'center'
                    },
                    {
                        title: 'Title',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                              
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },                                  
                                    on: {
                                        click: () => {
                                           this.show(params);
                                           this.modal2=true;
                                          console.log(this)
                                        }
                                    }
                                }, 'Detail'),
                                
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                list:[],
                data:{
                  cateId:0,
                  select:[],
                  title:'',
                  total:0,
                  page:1,
                  limit:10,
                  name:''
                }
      }
    },
    created(){
      this.getTree();
      this.getData();
    },
    methods:{
      getTree(){
        this.$http.post(`http://localhost:3000/cate/list/0`)
        .then((response)=>{
          this.treeData=response.data;
        }) 
      },
      getData(){
        this.$http({
          method:'post',
          url:`http://localhost:3000/news/list`,
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
     show(index){
        this.$Modal.info({
          title:'User Info',
            content: `title：${this.data[index].title}<br>Age：${this.data[index].age}<br>content：${this.data[index].content}<br>author：${this.data[index].author}`
        })
      },
     
      remove(params){
         this.$Modal.confirm({
          title:'Title',
          content:`<p>确认删除</p>`,
          onOk:()=>{
            this.$http({
              method:'delete',
              url:`http://localhost:3000/news/data/${params.row._id}`
            }).then(res=>{
              this.$Message.info('Clicked ok');
              this.getData();
            })
          },
          onCancel:()=>{
            this.$Message.info('Clicked cancel');
          }

        });
      },
         removeMore(){
            this.$Modal.confirm({
              title:'Title',
              content:`<p>确认删除？</p>`,
              onOk:()=>{
                 this.data.select.forEach((element )=> {
                   this.$http({
                        method:'delete',
                        url:"http://localhost:3000/news/data/"+element,                       
                    }).then(res=>{
                      this.getData()
                    })
                 });
                 
              },
               onCancel:()=>{
                  this.$Message.info('Clicked cancel');
                }
            })
               
            },
            checkMore (selection,row) {               
                 selection.forEach((element,index )=> {
                    this.data.select[index]=element._id
                 });
                 console.log(this.data.select)
            },

      ok(){
        this.$Message.info('Clicked ok');
      },
      cancel(){
        this.$Message.info('Clicked cancel');
      },
      handleSubmit(name){
        this.$refs[name].validate((valid)=>{
          if(valid){
            this.$http({
              method:'post',
              url:'http://localhost:3000/news/data',
              data:this.formValidate
            }).then(res=>{
              this.$Message.success('Success!');
              // 重置form表单内容微数据初始状态
              Object.assign(this.$data.formValidate,
              this.$options.data().formValidate);
              this.modal=false;
              this.getData();
            })
          }else{
            this.$Message.error('Fail!')
          }
        })
      },
      handleReset(name){
        this.$refs[name].resetFields();
      },
      onChangePage(page){
        this.data.page=page;
        this.$http({
          method:'post',
          url:'http://localhost:3000/news/list',
          data:this.data
        }).then(res=>{
          this.list=res.data.docs;
          this.data.total=res.data.total;
        })
      },
      onPageSizeChange(pageSize){
        this.data.limit=pageSize;
        this.getData();
      },
      search(){
        this.getData();
      },
      onSelectChange(node){

        // console.log(node[0]._id);
        this.data.cateId=node[0]._id;
        this.formValidate.cateId=node[0]._id;
        this.getData();
      }
    }
  }

</script>